<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:wh="http://java.sun.com/jsf/composite/webhib"
      xmlns:p="http://primefaces.prime.com.tr/ui">

   <ui:composition template="../template.xhtml">
      <ui:define name="head">
         <style>
            #page-content {
               font-size: 80%;
            }
            /* tree node padding */
            .ui-tree-node-content {
               padding:0px 4px 2px 2px;
            }

            /* dialog padding and border */
            .ui-dialog {
               padding-bottom: 0;
            }
            .ui-dialog .ui-dialog-content {
               padding: 1em;
            }
            .ui-panel {
               border: none;
            }
            .ui-panel .ui-panel-content {
               padding: 0;
            }
            .ui-dialog .ui-dialog-buttonpane {
               text-align: center;
            }
            .ui-resizable-e {
               right: -6px;
               width: 14px;
            }
            .ui-button {
               margin: 5px;
            }
            .ui-tree {
               padding:0;
               width: 200px;
            }

            /* own style classes */
            .hib-treeheader {
               height: 18px;
               border: 1px solid #aaa;
               border-bottom-style: none;
               -moz-border-radius: 4px 4px 0 0;
               text-align: center;
               margin-top: 3px;
               padding: 6px 0 0 0;
               line-height: 100%;
               white-space: nowrap;
            }
            .hib-treeframe {
               border:1px solid #aaa;
               padding: 0 1px 1px 0;
            }
            .hib-tree {
               width:100%;
               overflow:auto;
            }
            .hib-detail-content {
               padding: 0.3em 0 0 2em;
            }
            .hib-message .ui-dialog-content {
               text-align: center;
               padding: 1em 1em 0 1em;
            }
            .hib-message .page-message {
               margin: 0.5em;
               height: 52px;
            }
         </style>
      </ui:define>

      <ui:define name="title">
         #{msg.title_admin_category}
      </ui:define>

      <ui:define name="content">

         <p:panel id="main-tree-panel" style="width:250px;float:left;">
            <h:form id="tree-form" prependId="false">
               <div class="hib-treeheader ui-widget-header">
                  Data
               </div>
               <div class="hib-treeframe">
                  <div class="hib-tree" style="height:500px;">
                     <!-- dynamic="true" does not work properly in 3.0.M1 at tree update -->
                     <p:tree id="tree" value="#{category.tree.rootNode}" var="nodeData" dynamic="false" cache="false"
                             dragdrop="true" dragdropListener="#{category.tree.onDragDrop}"
                             selectionMode="single" style="border: none;"
                             selection="#{category.tree.selectedTreeNode}"
                             nodeSelectListener="#{category.tree.onNodeSelect}"
                             nodeUnselectListener="#{category.tree.onNodeUnselect}">
                        <p:treeNode>
                           <h:outputText value="#{nodeData.label}"/>
                        </p:treeNode>
                     </p:tree>
                  </div>
               </div>
            </h:form>
         </p:panel>
         <p:resizable for="main-tree-panel" minWidth="80" maxWidth="450" handles="e" />

         <p:panel id="main-table-panel" style="float:left;">
            <h:form id="list-form" prependId="false">
               <p:dataTable id="tablelist" style="width: 600px;"
                            var="item" value="#{category.list.tableList}"
                            widgetVar="categoryTable"
                            paginator="true" rows="10"
                            pageLinks="8" paginatorPosition="both"
                            paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown} {CurrentPageReport}"
                            rowsPerPageTemplate="5,10,15,20,30,50,100,200"
                            selectionMode="single"
                            update="tablelist:buttons"
                            onRowUnselectUpdate="tablelist"
                            selection="#{category.list.selectedItem}"
                            rowSelectListener="#{category.list.onRowSelect}"
                            rowUnselectListener="#{category.list.onRowUnselect}">

                  <f:facet name="header">
                     <div style="float:left;font-size:large;font-weight:bold;">
                        <h:outputText value="Categories"/>
                     </div>
                     <div style="float:right;">
                        <h:outputText value="Filter: " />
                        <h:inputText id="globalFilter" onchange="categoryTable.filter()" />
                     </div>
                     <p style="clear:both;"/>
                  </f:facet>

                  <p:column style="width:30%;" sortBy="#{item.title}" filterBy="#{item.title}" filterMatchMode="contains" filterEvent="change">
                     <f:facet name="header">
                        <h:outputText value="Title" />
                     </f:facet>
                     <span style="white-space:pre;">#{category.list.levelIndent(item,"   ")}</span>
                     <h:outputText value="#{item.title}" />
                  </p:column>

                  <p:column style="width:70%;" sortBy="#{item.description}" filterBy="#{item.description}" filterMatchMode="contains" filterEvent="change">
                     <f:facet name="header">
                        <h:outputText value="Description" />
                     </f:facet>
                     <h:outputText value="#{item.description}" />
                  </p:column>

                  <f:facet name="footer">
                     <!-- dummy submit button to avoid form to be triggered by return key in filter field -->
                     <p:commandButton  value="Dummy" style="display:none;"/>
                     <h:panelGroup id="buttons">
                        <p:commandButton  value="Edit" image="ui-icon ui-icon-search" disabled="#{category.list.selectedItem==null}"
                                          process="@this" actionListener="#{category.edit.editAction}"
                                          update=":detail-tree-form :detail-fields-form" oncomplete="dialogwindow.show()" />
                        <p:commandButton  value="New" image="ui-icon ui-icon-search"
                                          process="@this" actionListener="#{category.edit.newAction}"
                                          update=":detail-tree-form :detail-fields-form" oncomplete="dialogwindow.show()" />
                        <p:commandButton  value="Delete" image="ui-icon ui-icon-search" disabled="#{category.list.selectedItem==null}"
                                          process="@this" actionListener="#{category.edit.deleteAction}"
                                          update=":message-form" 
                                          oncomplete="if (args.validationFailed) messagewindow.show(); else confirmwindow.show();" />
                     </h:panelGroup>
                  </f:facet>
               </p:dataTable>
            </h:form>
         </p:panel>

         <p:dialog id="detail" header="Category Detail" widgetVar="dialogwindow" resizable="false" modal="true" 
                   minWidth="740" minHeight="390">
            <div id="page-content">
               <p:panel id="detail-tree-panel" style="width:200px;float:left;">
                  <h:form id="detail-tree-form" prependId="false">
                     <div class="hib-treeheader ui-widget-header">
                        Parent
                     </div>
                     <div class="hib-treeframe">
                        <div class="hib-tree" style="height:319px;">
                           <p:tree id="parentTree" value="#{category.edit.tree.rootNode}" var="nodeData" dynamic="false" cache="false"
                                   selectionMode="single" style="border: none;"
                                   selection="#{category.edit.tree.selectedTreeNode}"
                                   nodeSelectListener="#{category.edit.tree.onNodeSelect}"
                                   nodeUnselectListener="#{category.edit.tree.onNodeUnselect}"
                                   rendered="#{category.edit.active}">
                              <p:treeNode >
                                 <h:outputText value="#{nodeData.label}"/>
                              </p:treeNode>
                           </p:tree>
                        </div>
                     </div>
                  </h:form>
               </p:panel>
               <p:resizable for="detail-tree-panel" minWidth="80" maxWidth="300" handles="e" />

               <p:panel id="detail-fields-panel" style="float: left;">
                  <h:form id="detail-fields-form" prependId="false">
                     <h:panelGroup layout="block" styleClass="hib-detail-content" rendered="#{category.edit.active}">
                        <wh:pageMessage bean="#{category.edit}"/>
                        <wh:inputField id="title" label="#{msg.field_title}" value="#{category.edit.item.title}" tabindex="1"/>
                        <wh:inputField id="description" label="#{msg.field_description}" value="#{category.edit.item.description}" tabindex="1"/>
                        <h:panelGrid columns="2" cellpadding="6">
                           <p:commandButton value="Save"
                                            actionListener="#{category.edit.saveAction}"
                                            update=":detail-fields-form"
                                            oncomplete="if (!args.validationFailed) dialogwindow.hide()" />
                           <p:commandButton value="Cancel" actionListener="#{category.edit.cancelAction}" immediate="true"
                                            oncomplete="dialogwindow.hide()" />
                        </h:panelGrid>
                     </h:panelGroup>
                  </h:form>
               </p:panel>
            </div>
         </p:dialog>

         <h:form id="message-form" prependId="false">
            <p:dialog id="message-dialog" styleClass="hib-message" header="#{category.edit.messageHeader}"
                      widgetVar="messagewindow" modal="true" resizable="false" width="460" height="150">
               <wh:pageMessage bean="#{category.edit}"/>
               <p:commandButton value="Ok" oncomplete="messagewindow.hide()"/>
            </p:dialog>
            <p:dialog id="confirm-dialog" styleClass="hib-message" header="#{category.edit.messageHeader}"
                      widgetVar="confirmwindow" modal="true" resizable="false" width="460" height="150">
               <wh:pageMessage bean="#{category.edit}"/>
               <p:commandButton value="Ok" actionListener="#{category.edit.confirmAction}" oncomplete="confirmwindow.hide()"/>
               <p:commandButton value="Cancel" oncomplete="confirmwindow.hide()"/>
            </p:dialog>
         </h:form>

      </ui:define>
   </ui:composition>

</html>

